import { post } from "@/service/axiosManager";
import { Input, message, Modal } from "antd";
import React, { useState } from "react";
import "./CueWordsDialog.css";

export default function CueWordsDialog({open,data,setOpen}: {open: boolean,data: {
    title: string,
    words: string,
    command: string,
  }|null,setOpen: (open: boolean) => void}) {
    const [cueTitle,setCueTitle] = useState<string>('');
    const [cueWords,setCueWords] = useState<string>('');
    const [cueCommand,setCueCommand] = useState<string>('');
    const [changeTitle,setChangeTitle] = useState<boolean>(false);
    const [changeWords,setChangeWords] = useState<boolean>(false);
    const [changeCommand,setChangeCommand] = useState<boolean>(false);

    // useEffect(() => {
    //     if (data) {
    //         setCueTitle(data.title);
    //         setCueWords(data.words);
    //         setCueCommand(data.command);
    //     }
    // });
    return (
        <>
        <Modal title="新增提示词" centered open={open} okText="确定" cancelText="取消" width={500} onOk={() => {
            // if (!cueTitle && changeTitle) {
            //     message.warning("标题不能为空。");
            //     return;
            // }
            // if (!cueWords && changeWords) {
            //     message.warning("提示词不能为空。");
            //     return;
            // }
            // if (!changeCommand && changeCommand) {
            //     message.warning("描述不能为空。");
            //     return;
            // }
            const pcueTitle = changeTitle ? cueTitle : data?.title
            const pcueWords  = changeWords ? cueWords : data?.title
            const pcueCommand = changeCommand ? cueCommand : data?.title
            const cueWord = {
                "title": pcueTitle,
                "words": pcueWords,
                "command": pcueCommand,
            };
            post("/cue/word",cueWord).then((res) => {
                console.log(res);
                let msg = res?.result;
                if (res.code !== 0 || !res.success || !msg) {
                    msg = res?.message || "添加失败";
                    message.error(msg);
                }
                message.info("添加成功");
            }).catch((err) => {
                console.log(err);
                message.error(err);
            }).finally(() => {
                setChangeTitle(false);
                setChangeWords(false);
                setChangeCommand(false);
                setOpen(false);
            });
        }} onCancel={() => {
            setChangeTitle(false);
            setChangeWords(false);
            setChangeCommand(false);
            setOpen(false);
        }}>
            <Input 
            className="mb-2 mt-2 cue-title" 
            addonBefore="标&nbsp;&nbsp;&nbsp;&nbsp;题：" 
            placeholder="输入标题"
            defaultValue={data?.title}
            onChange={(e) => {
                setChangeTitle(true);
                setCueTitle(e.target.value);
            }}/>

            <Input 
            className="mb-2" 
            addonBefore="提示词：" 
            placeholder="输入提示词"
            defaultValue={data?.words} 
            onChange={(e) => {
                setChangeWords(true);
                setCueWords(e.target.value);
            }}/>

            <Input 
            className="mb-2" 
            addonBefore="描&nbsp;&nbsp;&nbsp;&nbsp;述：" 
            placeholder="输入描述"
            defaultValue={data?.command} 
            onChange={(e) => {
                setChangeCommand(true);
                setCueCommand(e.target.value);
            }}/>
        </Modal>
        </>
    );
}